<template>
    <div
        class="tree_item"
        @contextmenu.prevent="onContexMenu(item, $event)"
        @dblclick="onDoubleClick(item, $event)"
        :style="{ paddingLeft: 20 * (item.level) + 10 + 'px'}"
    >
        <!-- expand展开按钮 -->
        <div v-show="expand" @click="onToggleExpand(item)">
            <img v-show="!item.expand" src="../../../assets/tree/expand_right.png" alt="" width="20" height="20">
            <img v-show="item.expand" src="../../../assets/tree/expand_down.png" alt="" width="20" height="20">
        </div>
        <!-- checkbox选中 -->
        <div @click="onToggleChecked(item)">
            <input type="checkbox" :checked="item.checked">
        </div>
        <!-- folder文件夹或者file文件图标 -->
        <div class="isfolder">
            <img v-show="expand" src="../../../assets/tree/folder.png" alt="">
            <img v-show="!expand" src="../../../assets/tree/file.png" alt="">
        </div>
        <!-- 名称展示 -->
        <span>{{item.name}}</span>
        <!-- <input type="text"> -->
    </div>
</template>
<script>
export default {
	data() {
		return {}
	},
	props: {
		item: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	computed: {
		expand() {
			return this.item.children && this.item.children.length
		}
	},
	methods: {
		onToggleExpand(treeItem) {
			this.$emit('on-toggle-expand', treeItem)
		},
		onToggleChecked(treeItem) {
			this.$emit('on-toggle-checked', treeItem)
		},
		onContexMenu(treeItem, $event) {
			this.$emit('on-contex-menu', { treeItem, $event })
		},
		onDoubleClick(treeItem, $event) {
			this.$emit('on-contex-menu', { treeItem, $event })
		}
	}
}
</script>
<style scoped>
.tree_item {
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
}
</style>


